<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var ajax = {
            get: function (o) {
                //o.success: 回调函数, function
                //o.data: 参数, object
                //o.url: 请求路径, string

                //1: 创建ajax对象
                var xhr = new XMLHttpRequest();

                //2：监听ajax的状态变化
                xhr.onreadystatechange = function () {
                    if (this.readyState === 4 && this.status === 200) {
                        //回调函数处理ajax请求的结果
                        o.success(this.responseText);
                    }
                }

                //3:建立服务器连接
                if (o.data) {
                    var params = '';
                    for (var key in o.data) {
                        params += `${key}=${o.data[key]}&`;
                    }

                    params = params.slice(0, -1);

                    o.url += `?${params}`;
                }

                xhr.open('GET', o.url, true);

                //4:发起请求
                xhr.send();
            }
        };

        // ajax.get({
        //   url: 'http://api.tianapi.com/txapi/tianqi/index',
        //   data: {
        //     key: '05c9c231654fad19051ce388d3a14002',
        //     city: '广州'
        //   },
        //   success: function (res) {
        //     console.log('res ==> ', res);
        //   }
        // });


        //使用promise封装ajax
        let http = {
            get(o) {
                //返回一个promise
                return new Promise((resolve, reject) => {
                    //o.data: 参数, object
                    //o.url: 请求路径, string

                    //1: 创建ajax对象
                    var xhr = new XMLHttpRequest();

                    //2: 监听ajax的状态变化
                    xhr.onreadystatechange = function () {
                        if (this.readyState === 4 && this.status === 200) {

                            //promise的reslove处理ajax请求的结果
                            resolve(this.responseText);
                        }
                    }

                    //3: 建立服务器连接

                    if (o.data) {
                        var params = '';
                        for (var key in o.data) {
                            params += `${key}=${o.data[key]}&`;
                        }

                        params = params.slice(0, -1);

                        o.url += `?${params}`;
                    }

                    xhr.open('GET', o.url, true);

                    //4: 发起请求
                    xhr.send();
                })
            }
        };

        // http.get({
        //     url: 'http://api.tianapi.com/txapi/tianqi/index',
        //     data: {
        //         key: '05c9c231654fad19051ce388d3a14002',
        //         city: '长春'
        //     }
        // }).then(result => {
        //     console.log('result aa ==> ', result);
        // })
    </script>
</body>

</html>